<template>
  <div>
    <!-- 面包屑导航区域 -->
    <div class="bread_box">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/welcome' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>仪表盘</el-breadcrumb-item>
        <el-breadcrumb-item>报表统计</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <!-- 卡片视图区域 -->
    <el-card class="box_items">
      <div class="row">
        <div class="col-md-3" v-for="item in staticInfo" :key="item.id">
          <div class="box_item">
            <div class="left_item">
              <el-button :type="item.type" :icon="item.icon" circle></el-button>
            </div>
            <div class="right_item">
              <div>
                <h4>
                  {{ item.theme }}: <span>{{ item.num }}</span>
                </h4>
              </div>
              <!-- <div>
                <el-progress
                  :status="item.status"
                  :text-inside="true"
                  :stroke-width="20"
                  :percentage="item.percentage"
                ></el-progress>
              </div> -->
            </div>
          </div>
        </div>
      </div>
    </el-card>

    <!-- 走马灯区域 -->
    <!-- <el-card>
      <div class="carousel_box">
        <el-carousel
          :interval="4000"
          type="card"
          :height="carousel_height + 'px'"
        >
          <el-carousel-item v-for="item in imgList" :key="item.id">
            <div>
              <img :src="item.idView" class="image" />
            </div>
          </el-carousel-item>
        </el-carousel>
      </div>
    </el-card>

    <el-row>
      <el-col :span="12">
        <el-card>
          <h5>实训安排</h5>
          <div class="block">
            <div class="radio">
              <span>排序：</span>
              <el-radio-group v-model="reverse">
                <el-radio :label="true">倒序</el-radio>
                <el-radio :label="false">正序</el-radio>
              </el-radio-group>
            </div>

            <el-timeline :reverse="reverse">
              <el-timeline-item
                v-for="(activity, index) in activities"
                :key="index"
                :timestamp="activity.timestamp"
              >
                {{ activity.content }}
              </el-timeline-item>
            </el-timeline>
          </div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card>
          <h5>实训开发人员</h5>
          <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="id" label="学号" width="180">
            </el-table-column>
            <el-table-column prop="name" label="姓名" width="180">
            </el-table-column>
            <el-table-column prop="work" label="职务"> </el-table-column>
          </el-table>
        </el-card>
      </el-col>
    </el-row>  -->
  </div>
</template>

<script>
export default {
  data () {
    return {
      // 后台统计信息 （伪数据）
      staticInfo: [
        {
          id: 1,
          type: 'primary',
          status: 'primary',
          icon: 'el-icon-user',
          theme: '用户',
          percentage: 32,
          num: 27
        },
        {
          id: 2,
          type: 'success',
          status: 'success',
          icon: 'el-icon-document-copy',
          theme: '文章',
          percentage: 64,
          num: 93
        },
        {
          id: 3,
          type: 'danger',
          status: 'exception',
          icon: 'el-icon-chat-dot-square',
          theme: '评论',
          percentage: 83,
          num: 135
        },
        {
          id: 4,
          type: 'warning',
          status: 'warning',
          icon: 'el-icon-message',
          theme: '消息',
          percentage: 47,
          num: 56
        }
      ],
      // 走马灯图片
      imgList: [
        { id: 0, idView: require('../../../assets/img/carousel/a1.jpg'), title: '图片1' },
        { id: 1, idView: require('../../../assets/img/carousel/a2.jpg'), title: '图片2' },
        { id: 2, idView: require('../../../assets/img/carousel/a3.jpg'), title: '图片2' },
        { id: 3, idView: require('../../../assets/img/carousel/a4.jpg'), title: '图片4' }
      ],
      // 时间线
      reverse: true,
      activities: [
        {
          content: '网站体验版完成，即将考试，部分功能及优化未完待续。。。',
          timestamp: '2020-06-29'
        },
        {
          content: '网站问题修改样式，挺高用户体验',
          timestamp: '2020-06-23'
        }, {
          content: '将网站部署到阿里服务器、提供网站给测试工程师测试',
          timestamp: '2020-06-17'
        }, {
          content: '前后端开发正式开始',
          timestamp: '2020-06-07'
        }, {
          content: '个人项目基础知识学习、初步确定了小组成员分工',
          timestamp: '2020-06-03'
        }, {
          content: '实训选题、数据库结构讨论，确定了前后端分离的开发模式',
          timestamp: '2020-06-01'
        }],
      // 表格数据
      tableData: [
        {
          id: 2017030402003,
          name: '陈厚东',
          work: '前端工程师'
        }, {
          id: 2017030402021,
          name: '林凯智',
          work: '后端工程师'
        }],
      carousel_height: 350
    }
  }

}
</script>

<style lang="less" scoped>
.box_items {
  // height: 140px;
  box-sizing: border-box;
  .box_item {
    padding: 10px;
    border: 1px solid #eee;
    transition: all 0.8s;
    min-height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    .left_item {
      width: 30%;
      .el-button {
        width: 60px;
        height: 60px;
        outline: none;
        font-size: 30px;
      }
    }
    .right_item {
      width: 70%;
      span {
        color: #666;
      }
    }
  }
  .box_item:hover {
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  }
}
.carousel_box {
  margin: 20px 5px;
  .image {
    border-radius: 20px;
    width: 100%;
    height: inherit;
    background-size: cover;
    background-color: #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
    border: 1px solid #eee;
    padding: 5px;
  }
}
.el-timeline {
  padding-top: 5%;
}
.radio {
  .el-radio-group {
    padding-top: 5px;
  }
}
</style>
